<template>
  <el-card>
    <div class="report-header">
      <h3>发货渠道分析报表</h3>
      <div class="report-controls">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          @change="handleDateChange"
          style="width: 250px;"
        />
        <el-button type="success" @click="exportExcel">导出Excel</el-button>
      </div>
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" border style="width: 100%; margin-top: 20px;">
      <el-table-column prop="date" label="日期" width="120" />
      <el-table-column prop="japanPostEMS" label="日本邮政EMS" width="120" />
      <el-table-column prop="japanPostEMSPayment" label="EMS付款金额" width="120">
        <template #default="scope">
          <span class="payment-value">¥{{ scope.row.japanPostEMSPayment.toLocaleString() }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="airFreight" label="航空" width="100" />
      <el-table-column prop="airFreightPayment" label="航空付款金额" width="120">
        <template #default="scope">
          <span class="payment-value">¥{{ scope.row.airFreightPayment.toLocaleString() }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="seaFreight" label="海运" width="100" />
      <el-table-column prop="seaFreightPayment" label="海运付款金额" width="120">
        <template #default="scope">
          <span class="payment-value">¥{{ scope.row.seaFreightPayment.toLocaleString() }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="dhl" label="DHL" width="100" />
      <el-table-column prop="dhlPayment" label="DHL付款金额" width="120">
        <template #default="scope">
          <span class="payment-value">¥{{ scope.row.dhlPayment.toLocaleString() }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="domestic" label="日本国内" width="120" />
      <el-table-column prop="domesticPayment" label="国内付款金额" width="120">
        <template #default="scope">
          <span class="payment-value">¥{{ scope.row.domesticPayment.toLocaleString() }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="direct" label="直通" width="100" />
      <el-table-column prop="directPayment" label="直通付款金额" width="120">
        <template #default="scope">
          <span class="payment-value">¥{{ scope.row.directPayment.toLocaleString() }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="directMail" label="直邮" width="100" />
      <el-table-column prop="directMailPayment" label="直邮付款金额" width="120">
        <template #default="scope">
          <span class="payment-value">¥{{ scope.row.directMailPayment.toLocaleString() }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="total" label="发货总计" width="100">
        <template #default="scope">
          <span class="total-value">{{ scope.row.total }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="totalPayment" label="付款总计" width="120">
        <template #default="scope">
          <span class="total-payment-value">¥{{ scope.row.totalPayment.toLocaleString() }}</span>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as XLSX from 'xlsx'

const dateRange = ref(['2024-08-01', '2024-08-14'])
const tableData = ref<any[]>([])

const generateChannelData = (startDate: string, endDate: string) => {
  const start = new Date(startDate)
  const end = new Date(endDate)
  const data = []
  
  let current = new Date(start)
  while (current <= end) {
    const month = current.getMonth() + 1
    const date = current.getDate()
    
    // 生成各渠道发货量
    const japanPostEMS = Math.floor(Math.random() * 50) + 25
    const airFreight = Math.floor(Math.random() * 40) + 20
    const seaFreight = Math.floor(Math.random() * 60) + 30
    const dhl = Math.floor(Math.random() * 35) + 15
    const domestic = Math.floor(Math.random() * 45) + 25
    const direct = Math.floor(Math.random() * 40) + 20
    const directMail = Math.floor(Math.random() * 50) + 25
    
    // 生成各渠道付款金额（基于发货量计算，单位为日元）
    const japanPostEMSPayment = japanPostEMS * (Math.floor(Math.random() * 200) + 150) // 150-350円/件
    const airFreightPayment = airFreight * (Math.floor(Math.random() * 300) + 250) // 250-550円/件
    const seaFreightPayment = seaFreight * (Math.floor(Math.random() * 150) + 100) // 100-250円/件
    const dhlPayment = dhl * (Math.floor(Math.random() * 400) + 300) // 300-700円/件
    const domesticPayment = domestic * (Math.floor(Math.random() * 100) + 80) // 80-180円/件
    const directPayment = direct * (Math.floor(Math.random() * 250) + 200) // 200-450円/件
    const directMailPayment = directMail * (Math.floor(Math.random() * 350) + 250) // 250-600円/件
    
    const total = japanPostEMS + airFreight + seaFreight + dhl + domestic + direct + directMail
    const totalPayment = japanPostEMSPayment + airFreightPayment + seaFreightPayment + dhlPayment + domesticPayment + directPayment + directMailPayment
    
    data.push({
      date: `${month}月${date}日`,
      japanPostEMS,
      japanPostEMSPayment,
      airFreight,
      airFreightPayment,
      seaFreight,
      seaFreightPayment,
      dhl,
      dhlPayment,
      domestic,
      domesticPayment,
      direct,
      directPayment,
      directMail,
      directMailPayment,
      total,
      totalPayment
    })
    
    current.setDate(current.getDate() + 1)
  }
  
  return data
}

const updateData = () => {
  const data = generateChannelData(dateRange.value[0], dateRange.value[1])
  tableData.value = data
}

const handleDateChange = () => {
  updateData()
}

const exportExcel = () => {
  // 准备数据，添加中文表头
  const exportData = tableData.value.map(item => ({
    '日期': item.date,
    '日本邮政EMS': item.japanPostEMS,
    'EMS付款金额(円)': item.japanPostEMSPayment,
    '航空': item.airFreight,
    '航空付款金额(円)': item.airFreightPayment,
    '海运': item.seaFreight,
    '海运付款金额(円)': item.seaFreightPayment,
    'DHL': item.dhl,
    'DHL付款金额(円)': item.dhlPayment,
    '日本国内': item.domestic,
    '国内付款金额(円)': item.domesticPayment,
    '直通': item.direct,
    '直通付款金额(円)': item.directPayment,
    '直邮': item.directMail,
    '直邮付款金额(円)': item.directMailPayment,
    '发货总计': item.total,
    '付款总计(円)': item.totalPayment
  }))
  
  // 计算汇总行
  const totals = {
    '日期': '汇总',
    '日本邮政EMS': exportData.reduce((sum, item) => sum + item['日本邮政EMS'], 0),
    'EMS付款金额(円)': exportData.reduce((sum, item) => sum + item['EMS付款金额(円)'], 0),
    '航空': exportData.reduce((sum, item) => sum + item['航空'], 0),
    '航空付款金额(円)': exportData.reduce((sum, item) => sum + item['航空付款金额(円)'], 0),
    '海运': exportData.reduce((sum, item) => sum + item['海运'], 0),
    '海运付款金额(円)': exportData.reduce((sum, item) => sum + item['海运付款金额(円)'], 0),
    'DHL': exportData.reduce((sum, item) => sum + item['DHL'], 0),
    'DHL付款金额(円)': exportData.reduce((sum, item) => sum + item['DHL付款金额(円)'], 0),
    '日本国内': exportData.reduce((sum, item) => sum + item['日本国内'], 0),
    '国内付款金额(円)': exportData.reduce((sum, item) => sum + item['国内付款金额(円)'], 0),
    '直通': exportData.reduce((sum, item) => sum + item['直通'], 0),
    '直通付款金额(円)': exportData.reduce((sum, item) => sum + item['直通付款金额(円)'], 0),
    '直邮': exportData.reduce((sum, item) => sum + item['直邮'], 0),
    '直邮付款金额(円)': exportData.reduce((sum, item) => sum + item['直邮付款金额(円)'], 0),
    '发货总计': exportData.reduce((sum, item) => sum + item['发货总计'], 0),
    '付款总计(円)': exportData.reduce((sum, item) => sum + item['付款总计(円)'], 0)
  }
  
  // 在数据顶部添加汇总行
  const finalData = [totals, ...exportData]
  
  const ws = XLSX.utils.json_to_sheet(finalData)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, '发货渠道分析')
  XLSX.writeFile(wb, '发货渠道分析报表.xlsx')
}

onMounted(() => {
  updateData()
})
</script>

<style scoped>
.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.report-header h3 {
  margin: 0;
  color: #303133;
}

.report-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.total-value {
  color: #409eff;
  font-weight: bold;
}

.payment-value {
  color: #67c23a;
  font-weight: bold;
}

.total-payment-value {
  color: #f56c6c;
  font-weight: bold;
}
</style>
